<template>
    <div class="Asset-wrapper">
        <div class="title">
            <span>资产信息</span>
        </div>
        <el-skeleton animated :loading="loading">
            <template #template>
                <el-skeleton-item />
                <el-skeleton-item />
                <el-skeleton-item />
                <el-skeleton-item />
            </template>
            <template #default>
                <DataGrid
                    :auto-load="autoLoad"
                    row-key="id"
                    border
                    :pagination="false"
                    :showToolbar="false"
                    ref="dataGridRef"
                >
                    <el-table-column label="属性名称">
                        <template #default="scope">
                            <el-button link type="primary">
                                {{ scope.row.displayName }}
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="attributeName" label="标识符" />
                    <el-table-column prop="required" label="是否必填">
                        <template #default="{ row }">
                            {{ row.required ? '是' : '否' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="数据类型" prop="typeName">
                        <template #default="{ row }">
                            {{ attributeTypeList?.[row.typeName]?.displayName || 'N/A' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="displayValue" label="属性值" />
                    <el-table-column label="操作" width="60">
                        <template #default="{ row }">
                            <el-button type="primary" link @click="onSettingItem(row)">设置</el-button>
                        </template>
                    </el-table-column>
                </DataGrid>
            </template>
        </el-skeleton>
    </div>
</template>
<script setup lang="ts">
import { IoTDeviceService } from '@great/services';
import { DataGrid, type DataGridInstance } from '@great/components';
import { showPopupBox } from '@great/utils';
import AssetAttributeSelectModal from './AssetAttributeSettingModal.vue';

const props = defineProps<{
    attributeTypeList?: Record<string, any>;
    detailData?: Record<string, any>;
}>();
const attributeTypeList = inject<any>('AttributeTypeList') || props.attributeTypeList;
const loading = ref(true);

const dataGridRef = useTemplateRef<DataGridInstance>('dataGridRef');
const autoLoad = reactive({
    debounce: true,
    reloadDeps: [],
    onLoad: async () => {
        const result = await IoTDeviceService.getAssetsAttributeList({
            objectName: props.detailData?.objectName,
            deviceNo: props.detailData?.deviceNo
        });
        return {
            data: (result?.data || [])
                .filter(item => item.attributeType !== 'SYSTEM')
                .sort((a, b) => Number(b.required) - Number(a.required))
        };
    }
});

function onSettingItem(rowData) {
    showPopupBox(AssetAttributeSelectModal, {
        rowData,
        callback: () => {
            dataGridRef.value?.refresh();
        }
    });
}

watch(
    () => props.detailData,
    newValue => {
        if (newValue) loading.value = false;
    },
    { immediate: true }
);
</script>
<style scoped lang="scss">
.Asset-wrapper {
    .title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
</style>
